/* eslint-disable curly */
/* eslint-disable no-negated-condition */
import React from 'react';
import {Spin, Card, Button, Row, Col, Table, Form, Modal, message as msg} from 'antd';
import PropTypes from 'prop-types';
import routes from './routes';
import {FORM_OPTIONS, TABLE, DATE_FORMAT} from '../constants';
import {PERMISSION} from './constants';
import {hasPermissions} from './utils';
import {injectIntl, language} from './intl';
import {formatDateTime, formatAmount, conventEnumValueToString, formatPercent} from '../utils';
import styles from './style.css';
import PartClaimPanel from './PartClaimPanel';
import SearchInput from 'Shared/components/SearchInput';
import TextInput from 'Shared/components/TextInput';
import WrappedSelect from '../common/WrappedSelect';
import Return from '../common/Return';
import {newOrUpdateValidator} from './validator';
import {getDetail} from './api';
import {partClaimType, currency, partClaimReasonStatus, partPaymentMethod, partClaimResultStatus, isYesNo} from '../Enum';
import DealerSelectPanel from '../common/DealerSelect/SelectEdit';
import InputAmount from '../common/InputAmount';
import {getDealersQuickly, getDealers} from '../PartSaleOrder/api';
import InputPercent from '../common/InputPercent';

const date = new Date();
const FormItem = Form.Item;
const treatmentSchemeList = partClaimResultStatus.toList(language);
const isYesNoToList = isYesNo.toList(language);

class NewPanel extends React.PureComponent {
    state = {
        loading: false,
        hasOperat: false,
        data: {},
        details: [],
        showPartClaimPanel: false,
        showDealerSelectPanel: false,
    }
    componentDidMount() {
        this.getDetailInfo();
    }
    
    componentWillUnmount() {
        this.isunmount = true;
    }
    getDetailInfo = () => {
        if(this.props.id)
            getDetail(this.props.id)
                .then(res => {
                    if(res.ok)
                        this.setState({
                            isFetching: false,
                            data: res.data,
                            details: res.data.partClaimReportDetail.map(d => Object.assign({}, d, {
                                mgmtFee: res.data.isMgmFee ? d.claimFee * res.data.mgmtRate : 0,
                                payAmount: res.data.isMgmFee ? (d.claimFee * res.data.mgmtRate) + d.claimFee : d.claimFee,
                            }))
                        });
                    else
                        this.setState(({
                            isFetching: false
                        }));
                });
    }
    claimReasonChange = (claimReason, id) => {
        const details = this.state.details || [];
        const tmp = details.map(d => {
            if(d.partId === id)
                return Object.assign({}, d, {
                    claimReason
                });
            return d;
        });
        this.setState({
            details: tmp,
            hasOperat: true
        });
    }
    claimResultChange = (claimResult, id) => {
        const details = this.state.details || [];
        const data = this.state.data;
        const tmp = details.map(d => {
            if(claimResult === 1)
                if(d.partId === id)
                    // eslint-disable-next-line space-before-blocks
                    if(data.isMgmFee === 1){
                        d.payAmount = (d.claimFee * data.mgmtRate) + d.claimFee;
                    } else {
                        d.payAmount = d.claimFee;
                    }
            if(claimResult !== 1)
                if(d.partId === id)
                    d.payAmount = 0;
            if(d.partId === id)
                return Object.assign({}, d, {
                    claimResult,
                });
            return d;
        });
        
        
        this.setState({
            details: tmp,
            hasOperat: true
        });
    }
    payAmountOnChange = (payAmount, id) => {
        const details = this.state.details || [];
        const tmp = details.map(d => {
            if(d.partId === id)
                return Object.assign({}, d, {
                    payAmount,
                });
            return d;
        });
        this.setState({
            details: tmp,
            hasOperat: true
        });
    }
    onChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            hasOperat: true
        });
    }
    onTotalAmountChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            details: this.state.details.map(d => Object.assign({}, d, {
                totalAmount: value === 0 ? d.totalAmount : d.price * d.claimAmount,
            })),
            hasOperat: true
        });
    }
    
    onSelectInvoice = records => {
        this.setState({
            details: records.partClaimReportDetail.map(d => Object.assign({}, d, {
                claimAmount: d.claimAmount,
                claimFee: d.price * d.claimAmount,
                fobAmount: d.price * d.claimAmount,
                mgmtFee: d.price * d.claimAmount * records.mgmtRate,
                totalAmount: records.isMgmFee ? (d.price * d.claimAmount) + (d.price * d.claimAmount * records.mgmtRate) : d.price * d.claimAmount,
                claimReason: d.claimReason,
                claimResult: d.claimResult,
                payAmount: records.isMgmFee ? (d.price * d.claimAmount) + (d.price * d.claimAmount * records.mgmtRate) : d.price * d.claimAmount,
            })),
            data: Object.assign({}, this.state.data, {
                claimId: records.id,
                claimCode: records.code,
                brandCode: records.brandCode,
                brandName: records.brandName,
                dealerCode: records.dealerCode,
                claimType: records.claimType,
                invoiceCode: records.invoiceCode,
                invoicedDate: records.invoicedDate,
                currency: records.currency,
                paymentMethod: records.paymentMethod,
                receiptDate: records.receiptDate,
                shipmentDate: records.shipmentDate,
                actualArrivalDate: records.actualArrivalDate,
                address: records.address,
                contactNumber: records.contactNumber,
                destination: records.destination,
                mgmtRate: records.mgmtRate
            }),
            hasOperat: true,
            showPartClaimPanel: false
        });
    }
    onSelectDealer = record => {
        this.onChangeDealer();
        this.setState({
            data: Object.assign({}, this.state.data, {
                dealerId: record.id,
                dealerCode: record.code,
                dealerName: record.name
            }),
            hasOperat: true,
            showDealerSelectPanel: false
        });
    }
    onClickSearchBtn = () => {
        if(!this.state.data.brandId)
            return msg.warn(this.props.intl.formatMessage({
                id: 'newPanel.message.brand',
                defaultMessage: '请选择品牌'
            }));
        if(!this.state.data.dealerId)
            return msg.warn(this.props.intl.formatMessage({
                id: 'newPanel.message.dealer',
                defaultMessage: '请选择总代'
            }));
        this.setState({showPartClaimPanel: true});
    }
    onClosePartInvoicePanel = () => {
        this.setState({showPartClaimPanel: false});
    }
    onClickOkOnPopconfirm = () => {
        this.props.onCancel();
    }
    onUpdateClaimAmount = (claimAmount, id) => {
        const details = this.state.details || [];
        const tmp = details.map(d => {
            if(d.partId === id)
                return Object.assign({}, d, {
                    claimAmount,
                    claimFee: claimAmount * d.price,
                    fobAmount: claimAmount * d.price,
                    totalAmount: (claimAmount * d.price) + d.mgmtFee
                });
            return d;
        });
        this.setState({
            details: tmp,
            hasOperat: true
        });
    }
    onSubmit = () => {
        const {data, details} = this.state;
        const isValid = newOrUpdateValidator(data, details);
        if(!isValid) {
            this.setState({
                validate: true
            });
            return;
        }
        this.setState({loading: true});
        this.props.onSubmit(data, details).then(res => {
            if(res.success)
                this.props.successReturn();
            if(!this.isunmount)
                this.setState({loading: false});
        });
    }
    onChangeBrand = (value, name) => {
        if(this.state.data.brandId !== undefined && this.state.data.brandId !== value)
            Modal.confirm({
                title: this.props.intl.formatMessage({
                    id: 'newPanel.message.switch2',
                    defaultMessage: '提示'
                }),
                content: this.props.intl.formatMessage({
                    id: 'newPanel.message.switch',
                    defaultMessage: '变更品牌，将会清空清单数据，是否清空？'
                }),
                onOk: () => this.onBrandSwitch(value, name)
            });
        else
            this.setState({
                data: Object.assign({}, this.state.data, {
                    [name]: value
                }),
                hasOperat: true
            });
    }
    onChangeDealer = (value, name) => {
        if(!this.state.data.brandId)
            return msg.warn(this.props.intl.formatMessage({
                id: 'newPanel.message.brand',
                defaultMessage: '请选择品牌'
            }));
        if(this.state.data.dealerId !== undefined && this.state.data.dealerId !== value)
            Modal.confirm({
                title: this.props.intl.formatMessage({
                    id: 'newPanel.message.switch2',
                    defaultMessage: '提示'
                }),
                content: this.props.intl.formatMessage({
                    id: 'newPanel.message.switch3',
                    defaultMessage: '变更总代，将会清空清单数据，是否清空？'
                }),
                onOk: () => this.onDealerSwitch(value, name)
            });
        else
            this.setState({
                data: Object.assign({}, this.state.data, {
                    [name]: value
                }),
                hasOperat: true
            });
    }
    onBrandSwitch = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value,
            dealerId: undefined,
            code: undefined,
            invoiceCode: undefined,
            invoicedDate: undefined,
            currency: undefined,
            receiptDate: undefined,
            shipmentDate: undefined,
            actualArrivalDate: undefined,
            address: undefined,
            contactNumber: undefined,
            paymentMethod: undefined,
            claimAmount: undefined,
            destination: undefined
        });
        this.setState({
            data,
            details: [],
            hasOperat: true
        });
    }
    onDealerSwitch = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value,
            code: undefined,
            invoiceCode: undefined,
            invoicedDate: undefined,
            currency: undefined,
            receiptDate: undefined,
            shipmentDate: undefined,
            actualArrivalDate: undefined,
            address: undefined,
            contactNumber: undefined,
            paymentMethod: undefined,
            claimAmount: undefined,
            destination: undefined
        });
        this.setState({
            data,
            details: [],
            hasOperat: true
        });
    }
    onMgmFeeChange = (value, name) => {
        const data = Object.assign({}, this.state.data, {
            [name]: value
        });
        this.setState({
            data,
            details: this.state.details.map(d => Object.assign({}, d, {
                payAmount: value === 0 ? d.claimFee : (d.claimFee * data.mgmtRate) + d.claimFee,
            })),
            hasOperat: true
        });
    }
    render() {
        const {formatMessage} = this.props.intl;
        const {data, details, loading} = this.state;
        const {initEnum} = this.props;
        const validateBrandId = !data.brandId && this.state.validate ? 'error' : null;
        const validateInvoiceCode = !data.invoiceCode && this.state.validate ? 'error' : null;
        const submitable = !hasPermissions(PERMISSION.add, this.props.permissions) || !hasPermissions(PERMISSION.update, this.props.permissions);
        const dealerInfo = data.dealerId ? {
            id: data.dealerId,
            code: data.dealerCode,
            name: data.dealerName,
        } : null;
        let claimFee = 0;
        let claimAmount = 0;

        const queryCondition = {
            brandId: data.brandId
        };
        if(details.length > 0)
            details.forEach(v => {
                claimFee += v.claimFee;
                claimAmount += v.claimAmount;
            });

        const colums = [{
            title: formatMessage({
                id: 'newPanel.column.packingListCode',
                defaultMessage: '箱单号'
            }),
            dataIndex: 'packingListCode',
        }, {
            title: formatMessage({
                id: 'newPanel.column.partSaleOrderCode',
                defaultMessage: '备件销售订单编号'
            }),
            dataIndex: 'partSaleOrderCode',
        }, {
            title: formatMessage({
                id: 'newPanel.column.partCode',
                defaultMessage: '备件编号'
            }),
            dataIndex: 'partCode',
        }, {
            title: formatMessage({
                id: 'newPanel.column.partName',
                defaultMessage: '备件名称'
            }),
            dataIndex: 'partName',
        }, {
            title: formatMessage({
                id: 'newPanel.column.claimAmount',
                defaultMessage: '索赔数量'
            }),
            dataIndex: 'claimAmount',
        }, {
            title: formatMessage({
                id: 'newPanel.column.price',
                defaultMessage: '备件单价'
            }),
            dataIndex: 'price',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'newPanel.column.claimFee',
                defaultMessage: '索赔金额'
            }),
            dataIndex: 'claimFee',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'newPanel.column.fobAmount',
                defaultMessage: 'FOB金额'
            }),
            dataIndex: 'fobAmount',
            render: text => formatAmount(text)
        }, {
            title: formatMessage({
                id: 'newPanel.column.mgmtFee',
                defaultMessage: '管理费'
            }),
            dataIndex: 'mgmtFee',
            render: (text, record) => data.isMgmFee ? formatAmount(record.claimFee * data.mgmtRate) : 0
        }, {
            title: formatMessage({
                id: 'newPanel.column.totalAmount',
                defaultMessage: '总金额'
            }),
            dataIndex: 'totalAmount',
            render: (text, record) => data.isMgmFee ? formatAmount((record.claimFee * data.mgmtRate) + record.claimFee) : formatAmount(record.claimFee)
        }, {
            title: formatMessage({
                id: 'newPanel.column.claimReason',
                defaultMessage: '索赔原因'
            }),
            dataIndex: 'claimReason',
            render: text => conventEnumValueToString(partClaimReasonStatus, text)
        }, {
            title: formatMessage({
                id: 'newPanel.column.claimResult',
                defaultMessage: '索赔结果'
            }),
            dataIndex: 'claimResult',
            render: (text, record) => {
                const validate = (!text || text === undefined) ? {validateStatus: 'error'} : null;
                return (
                    <FormItem {...validate}>
                        <WrappedSelect
                            className={styles.wrappedSelect}
                            allowClear
                            id={record.partId}
                            value={record.claimResult}
                            options={treatmentSchemeList}
                            onChange={this.claimResultChange} />
                    </FormItem>
                );
            }
        }, {
            title: formatMessage({
                id: 'newPanel.column.payAmount',
                defaultMessage: '赔付金额'
            }),
            dataIndex: 'payAmount',
            render: (text, record) => {
                const validate = (!text || text === undefined) ? {validateStatus: 'error'} : null;
                return (
                    <FormItem {...validate}>
                        <InputAmount
                            id={record.partId}
                            value={record.payAmount}
                            onChange={this.payAmountOnChange}/>
                    </FormItem>
                );
            }
        }];
        return (
            <div className="form-standard">
                <Spin spinning={this.state.loading}>
                    <Card title={formatMessage({
                        id: 'newPanel.column.common',
                        defaultMessage: '订单基本信息'
                    })}>
                        <Form>
                            <Row>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.code',
                                        defaultMessage: '编号'
                                    })}
                                    {...FORM_OPTIONS.item} >
                                        {data.code || '尚未生成'}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={formatMessage({
                                            id: 'newPanel.operation.brandId',
                                            defaultMessage: '品牌'
                                        })}
                                        {...FORM_OPTIONS.item}
                                        validateStatus={validateBrandId}
                                        required>
                                        <WrappedSelect
                                            name="brandId"
                                            options={initEnum.brands}
                                            value={data.brandId}
                                            onChange={this.onChangeBrand} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'queryPanel.form.dealerId',
                                            defaultMessage: '总代'
                                        })}
                                        {...FORM_OPTIONS.item}>

                                        {data.brandId ? (<DealerSelectPanel
                                            value={dealerInfo}
                                            getDealerSimple={getDealersQuickly}
                                            getDealers={getDealers}
                                            conditions={queryCondition}
                                            onChange={this.onChangeDealer}
                                            onSelect={this.onSelectDealer} />) : (<TextInput name="dealerId"
                                            value={''} disabled={true} placeholder={this.props.intl.formatMessage({
                                                id: 'newPanel.dealerComp.placeholder',
                                                defaultMessage: '请先选择品牌'
                                            })} />) }
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.partClaimCode',
                                        defaultMessage: '备件索赔单编号'
                                    })} {...FORM_OPTIONS.item}
                                    validateStatus={validateInvoiceCode}
                                    required>
                                        <SearchInput
                                            disabled={true}
                                            value={data.claimCode}
                                            id={data.id}
                                            onClickSearchBtn={this.onClickSearchBtn} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.operation.claimType',
                                            defaultMessage: '索赔类型'
                                        })}
                                        {...FORM_OPTIONS.item} >
                                        {conventEnumValueToString(partClaimType, data.claimType)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.invoiceCode',
                                        defaultMessage: '发票号'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.invoiceCode}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.form.invoicedDate',
                                            defaultMessage: '开票日期'
                                        })}
                                        {...FORM_OPTIONS.item} >
                                        {formatDateTime(data.invoicedDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.operation.currency',
                                            defaultMessage: '币种'
                                        })}
                                        {...FORM_OPTIONS.item} >
                                        {conventEnumValueToString(currency, data.currency)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.operation.paymentMethod',
                                            defaultMessage: '赔付方式'
                                        })}
                                        {...FORM_OPTIONS.item} >
                                        {conventEnumValueToString(partPaymentMethod, data.paymentMethod)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.form.receiptDate',
                                            defaultMessage: '收货日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.receiptDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.form.shipmentDate',
                                            defaultMessage: '出运日期'
                                        })}
                                        {...FORM_OPTIONS.item} >
                                        {formatDateTime(data.shipmentDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.form.actualArrivalDate',
                                            defaultMessage: '到达日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(data.actualArrivalDate, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.address',
                                        defaultMessage: '地址'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.address}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.contactNumber',
                                        defaultMessage: '联系电话'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.contactNumber}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.destination',
                                        defaultMessage: '目的地'
                                    })} {...FORM_OPTIONS.item}>
                                        {data.destination}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.claimAmount',
                                        defaultMessage: '索赔总数量'
                                    })} {...FORM_OPTIONS.item}>
                                        {claimAmount}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem className={styles.multiLabel} label={formatMessage({
                                        id: 'addPanel.form.isMgmFee',
                                        defaultMessage: '是否需要管理费'
                                    })}{...FORM_OPTIONS.item}>
                                        {data.paymentMethod !== 1 ? '否'
                                            : <WrappedSelect
                                                allowClear
                                                name="isMgmFee"
                                                options={isYesNoToList}
                                                value={data.isMgmFee ? 1 : 0}
                                                onChange={this.onMgmFeeChange}/>
                                        }
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.mgmtRate',
                                        defaultMessage: '管理费率'
                                    })} {...FORM_OPTIONS.item}>
                                        <InputPercent
                                            name="mgmtRate"
                                            value={data.isMgmFee ? formatPercent(data.mgmtRate) : 0}
                                            precision={3}
                                            onChange={this.onChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.form.createTime',
                                            defaultMessage: '申请日期'
                                        })}
                                        {...FORM_OPTIONS.item}>
                                        {formatDateTime(date, DATE_FORMAT)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem label={formatMessage({
                                        id: 'newPanel.operation.totalFee',
                                        defaultMessage: '索赔总金额'
                                    })} {...FORM_OPTIONS.item}>
                                        {formatAmount(claimFee)}
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={formatMessage({
                                            id: 'newPanel.operation.surveyResults',
                                            defaultMessage: '调查结果'
                                        })} {...FORM_OPTIONS.item} required>
                                        <TextInput
                                            name="surveyResults"
                                            type="textarea"
                                            value={data.surveyResults}
                                            onBlur={this.onChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={formatMessage({
                                            id: 'newPanel.operation.preventMeasures',
                                            defaultMessage: '预防措施'
                                        })} {...FORM_OPTIONS.item} required>
                                        <TextInput
                                            name="preventMeasures"
                                            type="textarea"
                                            value={data.preventMeasures}
                                            onBlur={this.onChange}/>
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={this.props.intl.formatMessage({
                                            id: 'newPanel.operation.treatmentScheme',
                                            defaultMessage: '处理方案'
                                        })}
                                        {...FORM_OPTIONS.item} required>
                                        <WrappedSelect
                                            allowClear
                                            name="treatmentScheme"
                                            value={data.treatmentScheme}
                                            options={treatmentSchemeList}
                                            onChange={this.onChange} />
                                    </FormItem>
                                </Col>
                                <Col {...FORM_OPTIONS.col}>
                                    <FormItem
                                        label={formatMessage({
                                            id: 'newPanel.operation.payType',
                                            defaultMessage: '支付方式'
                                        })} {...FORM_OPTIONS.item} required>
                                        <TextInput
                                            name="payType"
                                            type="textarea"
                                            value={data.payType}
                                            onBlur={this.onChange}/>
                                    </FormItem>
                                </Col>
                            </Row>
                        </Form>
                    </Card>
                    <Card
                        title={formatMessage({
                            id: 'newPanel.operation.detail',
                            defaultMessage: '订单清单'
                        })}>
                        <Table
                            className="white-space-nowrap"
                            columns={colums}
                            rowKey="partId"
                            pagination={false}
                            dataSource={details}
                            {...TABLE} />
                    </Card>
                    <Card className={styles.optionBtn}>
                        <Button
                            type="primary"
                            onClick={this.onSubmit}
                            disabled={!submitable}
                            loading={loading}>
                            {formatMessage({
                                id: 'newPanel.operation.onSubmit',
                                defaultMessage: '保存'
                            })}
                        </Button>
                    </Card>
                    {
                        this.state.showPartClaimPanel &&
                        <PartClaimPanel
                            brandId={data.brandId}
                            dealerId={data.dealerId}
                            selectKey={data.id}
                            onCancel={this.onClosePartInvoicePanel}
                            onSelect={this.onSelectInvoice} />
                    }
                </Spin>
                <div className="page-toolbar">
                    <Return
                        disabled={this.state.loading}
                        onConfirm={this.onClickOkOnPopconfirm}
                        showWarning={this.state.hasOperat} />
                </div>
            </div>
        );
    }
}

NewPanel.propTypes = {
    initEnum: PropTypes.object.isRequired,
    permissions: PropTypes.array.isRequired,
    successReturn: PropTypes.func.isRequired,
    onCancel: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    enterprise: PropTypes.object,
    history: PropTypes.object,
    id: PropTypes.string,
    intl: PropTypes.object,
    isDealerUser: PropTypes.bool,
};

import {connect} from 'react-redux';
import {
    tableSearch,
    onNewOrUpdate
} from './actions';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';
import {createSelector} from 'reselect';
const getinitEnumData = createSelector(
    state => state.getIn(['page', 'domainData', 'initData']),
    init => {
        const initData = init.toJS();
        const brands = initData.brands ? initData.brands.map(item => ({
            text: `${'('}${item.code}${')'}${item.name}`,
            value: item.id
        })) : [];
        return {
            brands
        };
    }
);

const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const getEnterprise = selectorFactory(['page', 'domainData', 'initData', 'enterprise']);
const mapStateToProps = (state, props) => ({
    isDealerUser: state.getIn((['page', 'domainData', 'initData', 'isDealerUser'])),
    permissions: getPermissions(state),
    initEnum: getinitEnumData(state),
    enterprise: getEnterprise(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    onSubmit: (data, details) => dispatch(onNewOrUpdate(data, details)),
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
    onCancel: () => {
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(NewPanel));
